<template>
	<view class="inner-section">
		<view class="common-normal-box patch-supervision">
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">爱国教育</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
				<scroll-view  class="main-supervision" scroll-y="true" refresher-enabled="true" @scrolltolower="lowerFun">
				
				<view class="order-outer" v-for="(option,keyindex) in activityList" :key="keyindex">
					<view class="order-box" v-for="(item,index) in option.datas" :key="index" @click="newsDetail(item)">
						 <view class="tag-img">
						 	<image  :src="item.cover" mode="widthFix"></image>
						 </view>
						 
						 <view class="subject-key">
						 	<text class="key-title">{{item.title}}</text> 
							<text class="detail">{{item.briefly}}</text>
						 </view>
						 
					</view>	
				</view>	
				</scroll-view>	
		</view>	
		<PopWindow :visible.sync="isVisible"  width="420.63rpx" height="273.44rpx">
			 <template v-slot:content>
				  <view class="super-title">{{currentDetail.title}}</view>
				  <view class="super-from">创建时间：{{currentDetail.createT}}</view>
				  <view class="super-info short" v-if="currentDetail.briefly">
				  	简要：{{currentDetail.briefly}}
				  </view>
				  <view class="super-info">
					  <rich-text :nodes="currentDetail.content"></rich-text>
				  </view>
			 </template>
			
		</PopWindow>
	</view>
</template>

<script>
	import  {mapState} from 'vuex'
	import PopWindow from '../PopWindow/PopWindow.vue';
	import { fetchData } from '../../utils/request';
	export default {
		name:'SupervisionPage',
		data() {
			return {
				isVisible:false,
				currentDetail:{},
				activityList:[],
				pageSize:10,  // 每页显示10条
				pageIndex:1,//当前第几页
				totalPage:0
				
				
			};
		},
		components:{
			PopWindow
		},
		computed:{
			...mapState(['classId','baseImgURL','schoolId'])
		},
		methods:{
			newsDetail(item) {
				this.isVisible = true;
				this.currentDetail = item;
			},
			lowerFun(){
				   if(this.pageIndex>this.totalPage && this.totalPage!=0){ return;} 
					console.log('触底了， 加载下一页');
					this.getAllActivity();
			},
			async getAllActivity(){
				
				this.activityList = [];
				let res = await fetchData({
				        url:'/database/rededucation/education/list',
				        method:'GET',
						data:{
							pageNum:this.pageIndex,
							pageSize:this.pageSize,
							schoolId:this.schoolId,
							isClass:false
						}
				 })
				 if(res.code==200){
					this.pageIndex += 1;
					this.totalPage = Math.ceil(res.total/this.pageSize);
					 let size = 2;
					 let alldata = [...res.rows,...this.dataBack];
					 
					 this.dataBack = JSON.parse(JSON.stringify(alldata || []));
					 
					 let totalPage = Math.ceil(alldata.length/size);
					 
					 for(let i=0;i<totalPage;i++) { 
						 let dataAll = alldata.slice(size*i,size*(i+1));
						 this.activityList.push({
							 index:i+1,
							 datas:dataAll
						 })
					 }
				 }
			},
		},
		mounted(){
			
			this.dataBack = [];
			this.getAllActivity();
		}
	}
</script>

<style lang="scss" scoped>
.patch-supervision {
	width:100%;
	height:100%;
	
}
.main-supervision {
	height:318.91upx;
	margin-top: 7.81upx;
	.order-outer {
		height: 66.94upx;
		display: flex;
		flex-wrap: wrap;
		align-content:flex-start;
		justify-content: space-between;
		margin-bottom: 10.81upx;
	}
	.order-box {
		width: 48%;
		height: 66.94upx;
		
		display: flex;
		margin-right: 2%;
		box-sizing: border-box;
		// padding: 5.91upx;
		.tag-img {
			width:85.03upx!important;
			height: 53upx;
			margin-right: 10.86upx;
			overflow: hidden;
			
		}
	}
	.subject-key {
		flex-grow: 1;
		width: 220.25upx;
		display: flex;
		flex-direction: column;
		line-height: 14.84upx;
		.key-title {
			font-weight: 500;
			font-size: 10.16upx;
			color: #333333;
			margin-top: 3.91upx;
			margin-bottom: 3.91upx;
			overflow:hidden;
			word-wrap: break-word;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:1;  	
		}
		.detail {
			font-weight: 400;
			font-size: 7.03upx;
			color: #666666;
			overflow:hidden;
			word-wrap: break-word;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;  
			line-height: 12.84upx;
		}
		
	}
}

.super-title {
	font-weight: 500;
	font-size: 11.72upx;
	color: #333333;
	line-height: 17.97upx;
	text-align: center;
	
	padding: 7.81upx;
}

.super-info,.super-from {
	font-weight: 400;
	font-size: 7.81upx;
	color: #666666;
	line-height: 16.28upx;
	text-align: left;
	&.short {
		font-weight: bold;
		margin-bottom: 3.91upx;
	}
}
.super-from {
	text-align: center;
	margin-bottom: 7.81upx;
}
</style>
